<template>
  <div>
    <!--    面包屑导航区域-->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>

    <!--    卡片视图区域-->
    <el-card class="box-card">
      <!--      搜索与添加区域-->
      <el-input v-model="query.username" style="width: 200px" placeholder="请输入用户名"></el-input>
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-input v-model="query.screenname" style="width: 200px"  placeholder="请输入网名"></el-input>
      &nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;
      <el-button @click="getUserList()" type="primary">查询</el-button>
      <!--      &nbsp;&nbsp;&nbsp;&nbsp;-->
      <!--      <el-button @click="handleCreate()" type="primary">新增</el-button>-->

      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column
            prop="username"
            label="用户名"
            width="180">
        </el-table-column>
        <el-table-column
            prop="screenname"
            label="网名">
        </el-table-column>
        <el-table-column
            prop="sex"
            label="性别">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="电话">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="handleEdit(scope.row)">编辑</el-button>
            <el-button
                size="mini"
                @click="xiugaimima(scope.row)">重置密码</el-button>
<!--            <el-button-->
<!--                size="mini"-->
<!--                type="danger"-->
<!--                @click="handleDelete(scope)">删除</el-button>-->
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="this.query.page"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="this.query.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total">
      </el-pagination>

    </el-card>


    <el-dialog title="修改用户"
               :visible.sync="dialogFormVisible"
               width="40%"
               center
    >
      <el-form :model="form">
        <el-form-item label="账号" >
          <el-input style="width: 90%" v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <!--        <el-form-item label="密码" >-->
        <!--          <el-input style="width: 90%"  v-model="form.password" autocomplete="off"></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item label="性别" >
          <el-input style="width: 90%"  v-model="form.sex" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" >
          <el-input style="width: 90%"  v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="网名" >
          <el-input style="width: 90%"  v-model="form.screenname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="管理" >
          <el-select v-model="form.role" style="width: 90%" placeholder="请选择角色权限">
            <el-option label="管理员" value="0"></el-option>
            <el-option label="用户" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm()">确 定</el-button>
      </div>
    </el-dialog>



    <el-dialog width="30%" title="修改密码" :visible.sync="xiugaimimatanchuang">
      <el-form :model="xiugaiform">
        <el-form-item label="新密码" :label-width="formLabelWidth">
          <el-input v-model="xiugaiform.password" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="xiugaimimatanchuang = false">取 消</el-button>
        <el-button type="primary" @click="submitXiuGaiForm()">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "Users",
  data(){
    return{
      tableData: [],
      total:0,
      query:{
        page:1,
        size:6,
        username:'',
        screenname:'',
      },
      dialogFormVisible: false,
      xiugaimimatanchuang: false,
      form: {
        id:'',
        username:'',
        screenname:'',
        phone:'',
        sex:'',
        role:''
      },
      xiugaiform:{
        id:'',
        password:''
      },
      formLabelWidth: '60px'

    }
  },
  created() {
    //初始化调用方法
    this.getUserList()
  },
  methods:{
    getUserList(){
      this.axios.get('http://localhost:8901/user/getlist',{
        params:{
          page:this.query.page,
          size:this.query.size,
          username:this.query.username,
          screenname:this.query.screenname,
        }
      }).then((resp)=>{
        console.log(resp);
        this.tableData = resp.data.content.list;
        this.total = resp.data.content.total;
      })
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.page = val;
      this.getList();
    },
    handleEdit(row){
      console.log(row)
      this.form = row;
      this.dialogFormVisible = true
    },
    xiugaimima(row){
      console.log(row)
      this.xiugaiform = row;
      // alert(this.xiugaiform.password)
      this.xiugaiform.password ='';
      // alert(this.xiugaiform.password)
      this.xiugaimimatanchuang = true
    },

    submitForm(){
      this.axios.post('http://localhost:8901/user/save/',this.form).then((resp)=>{
        let data = resp.data;
        if(data.success){
          this.dialogFormVisible = false;
          this.form = {};
          this.getUserList()
          this.$message({
            message: '恭喜你，操作成功',
            type: 'success'
          });
        }
      })
    },
    submitXiuGaiForm(){
      this.axios.post('http://localhost:8901/user/updatePass/',this.xiugaiform).then((resp)=>{
        let data = resp.data;
        if(data.success){
          this.xiugaimimatanchuang = false;
          this.xiugaiform = {};
          this.getUserList()
          this.$message({
            message: '恭喜你，操作成功',
            type: 'success'
          });
        }
      })
    },
  },

}
</script>

<style scoped>

</style>